<template>
    <el-date-picker
        class="w-64"
        v-model="content"
        type="daterange"
        range-separator="-"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        clearable
    />
</template>

<script lang="ts" setup>
import {withDefaults, computed, WritableComputedRef} from 'vue'


interface dateRangePicker {
    startTime?: string
    endTime?: string
}

const props = withDefaults(defineProps<dateRangePicker>(), {
        startTime: '',
        endTime: ''
    }
)

const emit = defineEmits(['update:startTime', 'update:endTime'])


const content:any = computed({
    get: () => {
        return [props.startTime, props.endTime]
    },
    
    set: (value: Event | any) => {
        if (value === null) {
            emit('update:startTime', '')
            emit('update:endTime', '')
        } else {
            emit('update:startTime', value[0])
            emit('update:endTime', value[1])
        }
    }
})
</script>
